<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js 的可控变量定义功能
        // Object.defineProperty(target,attrName,desc) 用于为对象设置一个属性时，可以自行描述属性的操作特征
        //           target 目标对象
        //           attrName 新属性名
        //           desc 特征描述
        let user = {
            name:"tom"
        }
        Object.defineProperty(user,"age",{
            value:23,  // 默认值
            writable:false, // 是否可重写 默认值为 false
            enumerable:false // 是否可以被循环操作 默认值为 false
        })
        for (let k in user) {
            console.log(k,":",user[k])
        }
        
        // 开启数据劫持功能后，赋值和取值是通过其它变量进行存储中转
        let _user = {
            phone:1234567
        }

        let h1Dom;
        Object.defineProperty(user,"phone",{
            // writable:false,
            // value:1111111,
            enumerable:true,
            get:function(){
                console.log( "user.phone ==> get" )
                // return 1234567;
                return _user.phone
            },  // 取值拦截方法
            set:function(nv){
                // 数据劫持+响应式
                console.log( "user.phone ==> set ==>",nv )
                _user.phone = nv;
                h1Dom.textContent = nv;
            }   // 赋值拦截方法
        })
        
        window.onload = function(){
            h1Dom = document.querySelector("#h1")
            let inputDom = document.querySelector("#user")
            h1Dom.textContent = user.phone;

            inputDom.addEventListener("input",function(){
                user.phone = this.value;
            })
        }
    </script>
</head>
<body>
    <h1 id="h1"></h1>
    <input id="user" type="text">
</body>
</html>